<template>
  <div class="alert-list-item">
    <section>
      <div class="box">
        <ul class="header">
          <li class="cell first-idx">告警主题</li>
          <li class="cell">严重等级</li>
          <li class="cell">告警次数</li>
          <li class="cell">告警时间</li>
          <li class="cell">状态</li>
          <li class="cell">责任人</li>
        </ul>
        <div class="body">
          <vueSeamlessScroll :data="arr" :class-option="classOption">
            <ul class="list">
              <li
                v-for="(item, index) in arr"
                :key="index"
                class="row"
              >
                <span v-for="(v, idx) in item" :key="idx" class="cell">{{ v }}</span>
              </li>
            </ul>
          </vueSeamlessScroll>
        </div>
      </div>
    </section>

  </div>

</template>

<script>
import vueSeamlessScroll from 'vue-seamless-scroll'
export default {
  components: {
    vueSeamlessScroll
  },
  props: {
    data: {
      type: Array,
      default() {
        return []
      }
    }
  },
  data() {
    const { data } = this
    return {
      classOption: {
        step: 0.2, // 数值越大速度滚动越快
        limitMoveNum: 2, // 开始无缝滚动的数据量 this.dataList.length
        hoverStop: true, // 是否开启鼠标悬停stop
        direction: 1, // 0向下 1向上 2向左 3向右
        openWatch: true, // 开启数据实时监控刷新dom
        singleHeight: 0, // 单步运动停止的高度(默认值0是无缝不停止的滚动) direction => 0/1
        singleWidth: 0, // 单步运动停止的宽度(默认值0是无缝不停止的滚动) direction => 2/3
        waitTime: 1000 // 单步运动停止的时间(默认值1000ms)
      },
      arr: data.length > 0 ? data : [{
        theme: '站点不可访问连续3次',
        level: '警告(P2)',
        count: 1,
        date: '2021-08-07',
        status: '已解决',
        officer: '段辉硕'
      }, {
        theme: 'CPU使用率大于80%',
        level: '严重(P1)',
        count: 1,
        date: '2021-08-07',
        status: '待处理',
        officer: '段辉硕'
      }, {
        theme: '数据库三次不可连接',
        level: '警告(P2)',
        count: 2,
        date: '2021-08-07',
        status: '已解决',
        officer: '段辉硕'
      }, {
        theme: 'ERP站点无法访问',
        level: '严重(P1)',
        count: 1,
        date: '2021-08-07',
        status: '已解决',
        officer: '段辉硕'
      }, {
        theme: '服务器10分钟未打卡',
        level: '警告(P2)',
        count: 1,
        date: '2021-08-07',
        status: '已解决',
        officer: '段辉硕'
      }, {
        theme: 'E:磁盘空间小于10%',
        level: '警告(P2)',
        count: 5,
        date: '2021-08-07',
        status: '待处理',
        officer: '段辉硕'
      }, {
        theme: 'D:磁盘空间小于10%',
        level: '警告(P2)',
        count: 5,
        date: '2021-08-07',
        status: '待处理',
        officer: '段辉硕'
      }]
    }
  },
  created() {
    // 表格显示5行数据，此处复制开头的5条数据实现无缝
    // this.arr = this.arr.concat(this.arr.slice(0, 7))
  },
  methods: {
    handleViewDetail(index, row) {
      console.log(index, row)
    }
  }
}
</script>

<style  lang='scss'>
$cellHeight: 30px;
.alert-list-item {
  width: 100%;
  background-color: transparent;
  /*position: fixed;*/
  /*top: 630px;*/
  z-index: 9;
  margin-top: 40px;
  color: #fff;
  text-align: center;
  margin-left: 10px;
  font-size: 12px;
.section ,
.header ,
.box {
  width: 100%;
}
  ul {
    list-style: none;
    margin: 0;
    padding: 0;
  }

  .header {
    display: flex;
    background: #555;
    border-top: 1px solid #fff;
    border-left: 1px solid #fff;
  }

  .body {
    height: 7 * $cellHeight;
    border-bottom: 1px solid #fff;
    border-left: 1px solid #fff;
    overflow: hidden;
    // padding-bottom: 10px;
    li {
      display: flex;
      height: $cellHeight;
    }

    li > span:first-child {
      width: 30%;
      max-width: 150px;
    }

  }

  .cell {
    //flex: 1;
    width: 12.5%;
    height: $cellHeight;
    line-height: $cellHeight;
    border-right: 1px solid #e2e2e2;
    border-bottom: 1px solid #e2e2e2;
    box-sizing: border-box;
    &.first-idx {
      width: 30%;
      max-width: 150px;
    }
    &:nth-of-type(2),
    &:nth-of-type(3),
    &:nth-of-type(4){
      width: 15%;
    }
  }
}
</style>

